<template>
    <div class="app-container">
        <div class="filter-container">
            渠道商：<el-select
                size="mini"
                v-model="listQuery.channelId"
                remote
                :remote-method="getChannels"
                filterable
                clearable
                placeholder="请选择渠道商">
            <el-option
                    v-for="item in channels"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
            </el-option>
        </el-select>
            渠道号：<el-select
                size="mini"
                v-model="listQuery.channelItemId"
                remote
                :remote-method="getItems"
                filterable
                clearable
                placeholder="请选择渠道号">
            <el-option
                    v-for="item in items"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
            </el-option>
        </el-select>
            日期：<el-date-picker
                size="mini"
                clearable
                v-model="dateRange"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
        </el-date-picker>

            <el-button v-waves class="filter-item" size="mini" type="primary" icon="el-icon-search"
                       @click="handleFilter">
                搜 索
            </el-button>
        </div>
        <el-table
                v-loading="listLoading"
                :data="list"
                border
                fit
                highlight-current-row
                style="width: 100%;"
        >
            <el-table-column label="#" type="index" prop="index" align="center" width="80">
            </el-table-column>
            <el-table-column label="日期" prop="recordDate" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.recordDate }}</span>
                </template>
            </el-table-column>
            <el-table-column label="渠道商" prop="channelName" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.channelName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="渠道号" prop="channelItemName" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.channelItemName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="注册数" prop="regCount" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.regCount }}</span>
                </template>
            </el-table-column>

        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.limit" @pagination="getList" />
    </div>
</template>

<script>

    import { canalHiList } from '@/api/report/st'
    import { channelList, itemList } from '@/api/report/base'
    import Pagination from '@/components/Pagination'
    import waves from '@/directive/waves'

    export default {
        name: 'StConvert',
        components: { Pagination },
        directives: { waves },

        data() {
            return {
                list: null,
                total: null,
                listLoading: true,
                channels:[],
                items:[],
                dateRange:[],
                listQuery: {
                    pageNo: 1,
                    pageSize: 20,
                    channelId: null,
                    channelItemId: null,
                    startDate: '',
                    endDate: ''
                },
                loading: false
            }
        },
        created() {
            const that = this
            that.getList()
        },
        filters: {

        },
        methods: {
            getChannels(query) {
                const that = this
                const { keyword }  = query
                channelList(keyword).then(response => {
                    that.channels = response.data
                })
            },
            getItems(query) {
                const that = this
                const { keyword } = query
                itemList(keyword).then(response => {
                    that.items = response.data
                })
            },
            handleFilter() {
                const that = this
                that.listQuery.pageNo = 1
                that.getList()
            },
            getList() {
                const that = this
                that.listLoading = true
                const { channelId, channelItemId,pageNo, pageSize } = that.listQuery
                const startDate = that.dateRange != null ? that.dateRange[0] : null;
                const endDate = that.dateRange != null ? that.dateRange[1] : null;
                canalHiList({ channelId: channelId, channelItemId: channelItemId, startDate: startDate,
                    endDate: endDate, pageNo: pageNo, pageSize: pageSize }).then(response => {
                    that.list = response.data.dataList
                    that.total = response.data.total
                    setTimeout(() => {
                        this.listLoading = false
                    }, 1.5 * 1000)
                })
            }
        }
    }
</script>

<style scoped>

</style>

